<template>
    <div class="MPopup">
        <div class="mask" @click="getMPopupflagF"></div>
        <div class="box">
            <div class="box-head">
                <div v-if="index==1" @click="change(2)"><i  class="iconfont icon-liebiaoxunhuan"></i><span>列表播放</span></div>
                <div v-if="index==2" @click="change(3)"><i  class="iconfont icon-danquxunhuan"></i><span>单曲循环</span></div>
                <div v-if="index==3" @click="change(1)"><i  class="iconfont icon-22_suijibofang"></i><span>随机播放</span></div>
            </div>
            <div class="box-content">
                {{songInfo.name}} -{{songInfo.songname}}
            </div>
            <div class="box-bottom" @click="getMPopupflagF">关闭</div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            index:1,
            songInfo:{},
        }
    },
    created () {
        console.log(this.$store.state.playerflag);
        this.songInfo = this.$store.state.playerflag
    },
    methods: {
        change(data){
            this.index = data
        },
        getMPopupflagF(){
            this.$store.commit('getMPopupflag',false)
            this.$emit('offPopup', this.$store.state.MPopupflag)
        }
    }
}
</script>

<style scoped lang="scss">
.MPopup{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    .mask{
        width: 100%;
        height: 75%;
        background: #ccc;
        opacity: 0.7;
    }
    .box{
        width: 100%;
        height: 25%;
        background: #fff;
        display: flex;
        flex-direction: column;
        .box-head{
            font-size: 80px;
            padding: 0 33px;
            div{
                height: 200px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #000;
                i{
                    font-size: 120px;
                    margin-right: 66px;
                }
            }
        }
        .box-content{
            flex: 1;
            color: #22D59C;
            padding: 0 33px;
            padding-bottom: 200px;
            display: flex;
            align-items: center;

        }
        .box-bottom{
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 100px;
        }
    }
}
</style>